newUserStoryPromptProto = {
    initComponent : function()
    {
        this.items = this.contentItems;
        newUserStoryPrompt.superclass.initComponent.call(this);
        this.storyForm.saveButton.setHandler(this.doAdd, this);
    }
    ,closeAction : 'hide'
    ,title : 'New User Story'
    ,iconCls : 'icon-user1_message'
    ,autoWidth : true
    ,autoHeight : true
    ,contentItems : [
        {
            xtype : 'form'
            ,hideLabels : true
            ,autoWidth : true
            ,autoHeight : true
            ,defaults : {
                allowBlank : false
                ,width : 200
            }
            ,ref : 'storyForm'
            ,items : [
                {
                    name : 'group'
                    ,ref : 'groupField'
                    ,xtype : 'textfield'
                    ,emptyText : 'Group'
                    ,qtip : 'One of : Session, Ticket, User management, Assignees, Products, Sprints, Relations or Security...<br/>Or one of Your own'
                },{
                    name : 'userStory'
                    ,ref : 'storyField'
                    ,xtype : 'textarea'
                }
            ]
            ,buttonAlign : 'center'
            ,buttons : [
                {text : 'Save', ref : '../saveButton', iconCls : 'icon-add'}
                ,{text : 'Cancel', ref : '../cancelButton', iconCls : 'icon-stop'}
            ]
        }
    ]
    /**
     * Add a story from user input to the system
     **/
    ,doAdd : function()
    {
        Ext.getCmp('userstorygrid').addNew(this.storyForm.getForm().getValues());
        this.hide();
    }
    /**
     * Functionalities
     **/
};
newUserStoryPrompt = Ext.extend(Ext.Window, newUserStoryPromptProto);

userStoryProto = {
    /**
     * User Interface
     */
	title : 'SweatShop - User Stories'
    ,id : 'userstorygrid'
    ,iconCls : 'icon-note_pinned'
	,autoExpandColumn : 2
	,columns : [
		{
			header : 'Group'
			,dataIndex : 'group'
            ,menuDisabled : true
		},{
			header : '#'
			,dataIndex : 'number'
			,width : 5
            ,menuDisabled : true
		},{
			header : 'User Story'
			,dataIndex : 'userStory'
            ,menuDisabled : true
		},{
			dataIndex : 'done'
			,width : 7
            ,menuDisabled : true
			,renderer : function(v)
			{
				return v ? '<span class="done">&#x2714;</span>' : '';
			}
		}
	]
	,store : new Ext.data.GroupingStore({
		groupField : 'group'
        ,idProperty : 'number'
		,reader : new Ext.data.JsonReader({
            fields : [
				'group', 'userStory', 'number', 'done'
			]
		})

	})
	,view: new Ext.grid.GroupingView({
		forceFit : true
		,hideGroupedColumn : true
		,groupTextTpl: '<b>{text}</b> ({[values.rs.length]} {[values.rs.length > 1 ? "Cases" : "Case"]})'
	})
	,tbar : [
		{
			text : 'Show next User Story'
			,iconCls : 'icon-user1_new'
			,iconAlign : 'top'
			,ref : '../showButton'
		},'-',{
			text : 'Mark Done'
			,iconCls : 'icon-check2'
			,iconAlign : 'top'
            ,ref : '../doneButton'
            ,disabled : true
		},'->',{
            text : 'Add own User Story'
            ,iconCls :'icon-'
            ,iconAlign : 'top'
            ,ref : '../addButton'
        }
	]
    /**
     * Functionalities
     */
    ,initComponent : function()
	{
		userStoryPanel.superclass.initComponent.call(this);
		this.showButton.setHandler(this.showNext, this);
		this.doneButton.setHandler(this.markDone, this);
		this.addButton.setHandler(this.openAddUserStoryWindow, this);
        this.getSelectionModel().on('rowselect', this.enableDoneButton, this);
	}
    ,openAddUserStoryWindow : function()
    {
        new newUserStoryPrompt().show();
    }
    ,enableDoneButton : function()
    {
        this.doneButton.enable();
    }
    ,disableDoneButton : function()
    {
        this.doneButton.disable();
    }
	,data : userStories
	,index : 0
	,dataIndex : 0
	,showNext : function()
	{
        if(!this.allDone())
        {
            Ext.MessageBox.alert('Fail', 'All User Stories must be done before getting next one...');
            return;
        }
        if(!this.data[this.dataIndex])
        {
            Ext.MessageBox.alert('Done', 'No more User Stories');
            return;
        }
        this.showNew(this.getNext());
        return;
	}
    ,getNext : function()
    {
        ucClass = this.getStore().recordType;
		rec = this.data[this.dataIndex];
        this.index++;this.dataIndex++;
		rec.number = this.index;
		rec.done = rec.done ? true : false;
		uc = new ucClass(rec);
        return uc;
    }
    ,addNew : function(settings)
    {
        ucClass = this.getStore().recordType;
		settings.number = ++this.index;
		settings.done = false;
		uc = new ucClass(settings);
        return this.showNew(uc);
    }
    ,showNew : function(rec)
    {
        this.getStore().insert(0,rec);
        Ext.fly(this.getView().getRow(0)).fadeIn();
        this.getSelectionModel().selectRow(0,false);
        return;
    }
    ,allDone : function()
    {
        return this.getStore().findExact('done', false) == -1;
    }
	,markDone : function()
	{
		rec = this.getSelectionModel().getSelected();
        if(!rec) return;
        rec.data.done = true;
        this.getStore().remove(rec);
        this.getStore().insert(0,rec);
        this.disableDoneButton();
	}
	
}
/**
 * Extending
 */
userStoryPanel = Ext.extend(Ext.grid.GridPanel, userStoryProto);

/**
 * Starting
 */
Ext.onReady(function(){
  	Ext.QuickTips.init();

	new Ext.Viewport({
		renderTo: Ext.getBody()
        , autoScroll : true
		, layout : 'fit'
    	,items:[ new userStoryPanel() ]
	});
});
